<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Realtime Rendering - Abgaben</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

<style type="text/css">
  html,
  body {
    height: 100%;
  }

  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto .60px;
  }
  #push,
  #footer {
    height: 60px;
  }
  #footer {
    background-color: #f5f5f5;
  }
</style>
</head>
<body onload="webGLStart();">
<div id="wrap">
<div class="container">
<div class="page-header">
  <h1>Realtime Rendering<br> <small>Abgaben SS 2013</small>
  </h1>
</div>

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="./../index.html">Aufgaben</a>
    <ul class="nav">
      <li><a href="./../aufgabe02/index.html">WebGL Tesselation</a></li>
      <li class="active"><a href="./../aufgabe03/index.html">Simple Lighting</a></li>
      <li><a href="./../aufgabe04/index.html">Environment-Mapping</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="lit-Dateien/base.js"></script>
<script type="text/javascript" src="lit-Dateien/gl-matrix.js"></script>
<script type="text/javascript" src="lit-Dateien/lit.js"></script>

<script type="text/javascript" src="tdl/programs.js"></script>
<script type="text/javascript" src="tdl/log.js"></script>
<script type="text/javascript" src="tdl/string.js"></script>
<script type="text/javascript" src="tdl/webgl.js"></script>
<script type="text/javascript" src="tdl/misc.js"></script>
<script type="text/javascript" src="tdl/models.js"></script>
<script type="text/javascript" src="tdl/buffers.js"></script>
<script type="text/javascript" src="tdl/primitives.js"></script>
<script type="text/javascript" src="tdl/math.js"></script>
<script type="text/javascript" src="tdl/textures.js"></script>

 <div class="hero-unit"> 
    <div id="canvas-container">
      <p><canvas id="canvas" width="1170" height="702"></canvas></p>
    </div>  
  <ul>
      <li>Use keys 0-5 to switch between shader programs.</li>
	  <li>Press 'R' to rotate the tori.</li>
	  <li>Press 'C' to switch the 1st ligh color.</li>
	  <li>Press 'X' to switch the 2nd light color.</li>
	  <li>Press 'T' to toggle the 2nd light animation.</li>
	  <li>Press 'I' to increase the 1st light intensity.</li>
	  <li>Press 'O' to decrease the 1st light intensity.</li>
	  <li>Press 'K' to increase the 2nd light intensity.</li>
	  <li>Press 'L' to decrease the 2nd light intensity.</li>
	  <li>Press 'Q' to switch the geometry between cubes and tori.</li>
	  <li>Press 'W' to increase the texture spacing.</li>
	  <li>Press 'E' to decrease the texture spacing.</li>
	  <li>Press 'S' to stop movement.</li>
	  <li>Press 'Z' to increase the texture color.</li>
	  <li>Press 'H' to decrease the texture color.</li>
    </ul>
</div>
<h3>Aufgabe 3.1</h3>
<p>Das nachfolgende Bild wurde mit dem Shader Nummer 3 Erzeugt.
Wie in der Aufgabe vorgesehen werden die Farben nach dem Phong Farbmodell berechnet jedoch in 4 unterschiedliche Intensit&auml;ten
unterteilt um den Toon Effekt zu erzeugen.
Diese Unterteilung findet an 4 Stellen statt:<br>
<ol><li>Es wurde der 3. Fragment Shader angepasst sodass die Intensit&auml;t der Farbe abh&auml;ngig
vom Winkel zwischen der Oberfl&auml;chennormalen und des Richtingsvektors der Lichtquelle ist.
<li>Die Intensit&auml;t wird in 4 Stufen unterteilt, indem sie mit einem festgelegten CelBand Faktor (hier 4.0) multipliziert wird,
der Wert der
<a href="http://de.wikipedia.org/wiki/Abrundungsfunktion_und_Aufrundungsfunktion">Abrundungsfunktion_und_Aufrundungsfunktion</a>
der Multiplikation wird dann wieder durch den CelBand Faktor geteilt.</p></li>
<li>Es wurde die Lambert Funktion angepasst, die Intensit&auml;t wirkt sich durch die &Auml;nderung auch auf die Diffusebeleuchtung aus.</li>
<li>Es wurde der Reflektions-Term angepasst umd das Glanzlicht nicht so weich wie beim Phong Model dazustellen.</li>
</ol>
<img src="./toonshader-one-light.png" />
<h3>Aufgabe 3.2</h3>
Die nachfolgende Abbildung zeigt 2 verschiedenfarbige Lichtquellen bei dennen die Position animiert ist. Die Farbe und Intensit&auml;t kann &uuml;ber Tasten beinfflusst werden.
Die Farbe der Lichtquellen ergibt sich aus dem Intensit&auml;tsvektor der Lichtquelle, dies wird zur Laufzeit in der Rendering Funktion modifiziert.
<img src="./toonshader-two-lights.png"/>

<h3>Aufgabe 3.3</h3>
<p>Die nachfolgende Abbildung zeigt anstelle der Tori Cuben auf dennen der Circle Fragment Shader angewendet wurde.</p>
<img src="./cubes-circle-texture-two-lights.png"/>
<h3>Sources</h3>
<a href="https://code.google.com/p/rtr2013/source/browse/#svn%2Ftrunk%2Faufgabe03">Sources der Aufgabe 3 auf GoogleCode</a>

</ul><li><a href="http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shading-version-iii/">http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shading-version-iii/</a></li> 
 <li><a href="http://www.informatik-forum.at/showthread.php?91347-Toon-shader">http://www.informatik-forum.at/showthread.php?91347-Toon-shader</a></li></ul>
<li>
   <a href="http://people.freedesktop.org/~idr/OpenGL_tutorials/03-fragment-intro.html">http://people.freedesktop.org/~idr/OpenGL_tutorials/03-fragment-intro.html</a></li> 
</div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</div>
<div id="push"></div>
</div>

 <div id="footer">
   <div class="container">
	<p class="muted credit">Website made by<br/>
	Fabian Engels s797352
	<a href="mailto:engels.fabian@gmail.com">engels.fabian@gmail.com</a><br>
	Sven H&ouml;che s797948
	<a href="mailto:sven.hoeche@gmx.de">sven.hoeche@gmx.de</p>
   
      </div>
  </div>

  <script id="vs0" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

attribute vec4 position;

void main() {
  gl_Position = projection * view * model * position;
}
</script>

<script id="fs0" type="text/glsl">
precision highp float;

uniform vec3 color;

void main() {
  gl_FragColor.rgb = 0.7 * color;
  gl_FragColor.a = 1.0;
}
</script>

<!-- Lambert lighting model, Gouraud shading -->

<script id="vs1" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 color;
uniform vec3 lightIntensity;
uniform vec3 lightPosition;
uniform vec3 eyePosition;

attribute vec4 position;
attribute vec3 normal;

varying vec3 intensity;

vec3 lambert(vec3 normal, vec3 light, 
             vec3 intensity, vec3 reflectivity) {
  return 0.1 * reflectivity * intensity +
         0.6 * reflectivity * intensity * max(0.0, dot(normal, light));
}

void main() {
  vec3 normalW = (model * vec4(normal, 0.0)).xyz;
  vec4 positionW = model * position;
  vec3 lightDirectionW = normalize(lightPosition - positionW.xyz);

  intensity = lambert(normalW, lightDirectionW, lightIntensity, color);
  gl_Position = projection * view * positionW;
}
</script>

<script id="fs1" type="text/glsl">
precision highp float;

varying vec3 intensity;

void main() {
  gl_FragColor.rgb = intensity;
  gl_FragColor.a = 1.0;
}
</script>

<!-- Phong lighting model, Gouraud shading -->

<script id="vs2" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 color;
uniform vec3 lightIntensity;
uniform vec3 lightPosition;
uniform vec3 eyePosition;

attribute vec4 position;
attribute vec3 normal;

varying vec3 intensity;

vec3 lambert(vec3 normal, vec3 light, 
             vec3 intensity, vec3 reflectivity) {
  return 0.1 * reflectivity * intensity +
         0.6 * reflectivity * intensity * 
         max(0.0, dot(normal, light));
}

vec3 phong(vec3 normal, vec3 eye, vec3 light, 
           vec3 intensity, vec3 reflectivity) {
  return lambert(normal, light, intensity, reflectivity) +
         0.3 * intensity * pow(max(0.0, dot(reflect(-eye, normal), 
                                      light)), 10.0);
}

void main() {
  vec3 normalW = (model * vec4(normal, 0.0)).xyz;
  vec4 positionW = model * position;
  vec3 lightDirectionW = normalize(lightPosition - positionW.xyz);
  vec3 eyeDirectionW = normalize(eyePosition - positionW.xyz);

  intensity = phong(normalW, eyeDirectionW, lightDirectionW, 
                    lightIntensity, color);
  gl_Position = projection * view * positionW;
}
</script>

<script id="fs2" type="text/glsl">
precision highp float;

varying vec3 intensity;

void main() {
  gl_FragColor.rgb = intensity;
  gl_FragColor.a = 1.0;
}
</script>

<!-- Phong lighting model, Toon shading -->

<script id="vs3" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 lightPosition;
uniform vec3 lightPosition_2;
uniform vec3 eyePosition;

attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 lightDirectionW_2;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

void main() {
  vec4 positionW = model * position;
  normalW = (model * vec4(normal, 0.0)).xyz;
  lightDirectionW = lightPosition - positionW.xyz;
  lightDirectionW_2 = lightPosition_2 - positionW.xyz;
  eyeDirectionW = eyePosition - positionW.xyz;
  texCoordI = texCoord;

  gl_Position = projection * view * positionW;
}
</script>

<script id="fs3" type="text/glsl">
precision highp float;

float celband = 4.0;
float toonFactor;
float toonFactor_2;
float intensy;
float intensy_2;

uniform vec3 color;
uniform vec3 lightIntensity;
uniform vec3 lightIntensity_2;
uniform float textureScale;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 lightDirectionW_2;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

float toonDiffuse(vec3 normal, vec3 light) {
	float diffuse = max(0.0, dot(normal, light));
	return floor(diffuse*celband)/celband;
}

vec3 lambert(vec3 normal, vec3 light, 
             vec3 intensity, vec3 reflectivity) {
  return 0.1 * reflectivity * intensity +
         0.6 * reflectivity * intensity * toonDiffuse(normal, light);
}

float toonReflect(vec3 eye, vec3 normal, vec3 light) {
	float reflect = pow(max(0.0, dot(reflect(-eye, normal), light)), 10.0);
	if(reflect > 0.5)
		return 1.0;
	else
		return 0.0;
}

vec3 phong(vec3 normal, vec3 eye, vec3 light, 
           vec3 intensity, vec3 reflectivity) {
  return lambert(normal, light, intensity, reflectivity) + 0.3 * intensity *
		toonReflect(eye, normal, light);
}


void main() {
 /* http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shading-version-iii/ */
 /* http://www.informatik-forum.at/showthread.php?91347-Toon-shader */
	intensy = dot(normalize(lightDirectionW), normalW);
	intensy_2 = dot(normalize(lightDirectionW_2), normalW);
	
	intensy = floor(intensy * celband) / celband;
	intensy_2 = floor(intensy_2 * celband) / celband;

    gl_FragColor.rgb = phong(
    normalize(normalW), 
    normalize(eyeDirectionW), 
    normalize(lightDirectionW), 
    lightIntensity, color * intensy );
	
	gl_FragColor.rgb += phong(
    normalize(normalW), 
    normalize(eyeDirectionW), 
    normalize(lightDirectionW_2), 
    lightIntensity_2, color * intensy_2 );
	
    gl_FragColor.a = 1.0;
}
</script>

<!-- Phong lighting model, Phong shading with texture -->

<script id="vs4" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 lightPosition;
uniform vec3 eyePosition;

attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

void main() {
  vec4 positionW = model * position;
  normalW = (model * vec4(normal, 0.0)).xyz;
  lightDirectionW = lightPosition - positionW.xyz;
  eyeDirectionW = eyePosition - positionW.xyz;

  texCoordI = texCoord;
  gl_Position = projection * view * positionW;
}
</script>

<script id="fs4" type="text/glsl">
precision highp float;

uniform vec3 lightIntensity;

uniform sampler2D earth;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

vec3 lambert(vec3 normal, vec3 light, 
             vec3 intensity, vec3 reflectivity) {
  return 0.1 * reflectivity * intensity +
         0.6 * reflectivity * intensity * max(0.0, dot(normal, light));
}

vec3 phong(vec3 normal, vec3 eye, vec3 light, 
           vec3 intensity, vec3 reflectivity) {
  return lambert(normal, light, intensity, reflectivity) +
         0.3 * intensity * pow(max(0.0, dot(reflect(-eye, normal), 
                                      light)), 10.0);
}

void main() {

  vec3 color = texture2D(earth, texCoordI).rgb;

  gl_FragColor.rgb = phong(
    normalize(normalW), 
    normalize(eyeDirectionW), 
    normalize(lightDirectionW), 
    lightIntensity, color);
  gl_FragColor.a = 1.0;
}
</script>

<!-- Phong lighting model, Phong shading -->

<script id="vs5" type="text/glsl">
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 lightPosition;
uniform vec3 lightPosition_2;
uniform vec3 eyePosition;

attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 lightDirectionW_2;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

void main() {
  vec4 positionW = model * position;
  normalW = (model * vec4(normal, 0.0)).xyz;
  lightDirectionW = lightPosition - positionW.xyz;
  lightDirectionW_2 = lightPosition_2 - positionW.xyz;
  eyeDirectionW = eyePosition - positionW.xyz;
  texCoordI = texCoord;

  gl_Position = projection * view * positionW;
}
</script>

<script id="fs5" type="text/glsl">
precision highp float;
/* celband defines how many shades are visible */
float celband = 4.0;
float toonFactor;
float toonFactor_2;
float intensy;
float intensy_2;

uniform vec3 color;
uniform vec3 lightIntensity;
uniform vec3 lightIntensity_2;
uniform float textureScale;
uniform vec3 textureColor;

varying vec3 normalW;
varying vec3 lightDirectionW;
varying vec3 lightDirectionW_2;
varying vec3 eyeDirectionW;
varying vec2 texCoordI;

float toonDiffuse(vec3 normal, vec3 light) {
	float diffuse = max(0.0, dot(normal, light));
	return floor(diffuse*celband)/celband;
}

vec3 lambert(vec3 normal, vec3 light, 
             vec3 intensity, vec3 reflectivity) {
  return 0.1 * reflectivity * intensity +
         0.6 * reflectivity * intensity * toonDiffuse(normal, light);
}

float toonReflect(vec3 eye, vec3 normal, vec3 light) {
	float reflect = pow(max(0.0, dot(reflect(-eye, normal), light)), 10.0);
	if(reflect > 0.5)
		return 1.0;
	else
		return 0.0;
}

vec3 phong(vec3 normal, vec3 eye, vec3 light, 
           vec3 intensity, vec3 reflectivity) {
  return lambert(normal, light, intensity, reflectivity) + 0.3 * intensity *
		toonReflect(eye, normal, light);
}


void main() {
 /* http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shading-version-iii/ */
 /* http://www.informatik-forum.at/showthread.php?91347-Toon-shader */
  intensy = dot(normalize(lightDirectionW), normalW);
  intensy_2 = dot(normalize(lightDirectionW_2), normalW);
	
  intensy = floor(intensy * celband) / celband;
  intensy_2 = floor(intensy_2 * celband) / celband;
  /* add first light color to fragment color */
  gl_FragColor.rgb = phong(
    normalize(normalW), 
    normalize(eyeDirectionW), 
    normalize(lightDirectionW), 
    lightIntensity, color * intensy );
  /* add second light color to fragment color */
  gl_FragColor.rgb += phong(
    normalize(normalW), 
    normalize(eyeDirectionW), 
    normalize(lightDirectionW_2), 
    lightIntensity_2, color * intensy_2 );
	
  /* http://people.freedesktop.org/~idr/OpenGL_tutorials/03-fragment-intro.html */
  vec2 pos = mod(texCoordI * textureScale, vec2(75.0)) - vec2(50.0);
  float dist_squared = dot(pos, pos);
  
  gl_FragColor += mix(vec4(textureColor, 1.0),
                      vec4(.20, .20, .40, 1.0),
                     smoothstep(380.25, 420.25, dist_squared));
  gl_FragColor.a = 1.0;
}
</script>


</body></html>
